<template>
<div class="time1">
    <p>秒杀倒计时: {{ formatH }}时 {{ formatM }}分 {{ formatS }}秒</p>
    <button @click="go=true">抢购</button>
    <p v-if="go">抢购成功</p>
    <!-- <p v-if="go=no">抢购失败</p> -->
</div>
</template>

<script setup>
import { ref, watch, computed} from 'vue'

const h = ref(0)
const m = ref(0)
const s = ref(10)
const go = ref(false)
// const start = ref(null)

// const startTimer = () => {
//     //setInterval自带的一个计时方法,它会隔一段时间运行一次
//     start.value = setInterval(() => {
//         s.value --
//     },1000) //隔1000毫秒运行一次秒加1
// }

//setInterval自带的一个计时方法,它会隔一段时间运行一次
    setInterval(() => {
         s.value --
     },1000)        //隔1000毫秒运行一次秒加1

//使用计算属性computed()把时、分、秒格式化
const formatS = computed(() => {
    if(s.value < 10){
        return '0' + s.value
    }
    else {
        return s.value
    }
})

const formatM = computed(() => {
    if(m.value < 10){
        return '0' + m.value
    }
    else {
        return m.value
    }
})

const formatH = computed(() => {
    if(h.value < 10){
        return '0' + h.value
    }
    else {
        return h.value
    }
})

watch(s, (newSeconds) => {
    if (newSeconds < 0) {  // 如果秒数小于0
        s.value = 0;  
    }
})
</script>
<style scoped>
.time1{
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}

</style>